<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增chopping')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-chopping-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">剁形id：</label>
            <div class="col-sm-8">
                <input name="stackingId" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">剁形名称：</label>
            <div class="col-sm-8">
                <input name="stackingName" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">层高：</label>
            <div class="col-sm-8">
                <input name="floorHeight" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">层数：</label>
            <div class="col-sm-8">
                <input name="floorNum" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">每层件数：</label>
            <div class="col-sm-8">
                <input name="floorEach" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">图片：</label>
            <div class="col-sm-8">
                <input type="hidden" name="spare1" id=spare1>
                <div class="file-loading">
                    <input type="file" name="avatar" id="inputImage" accept="image/*"/>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: cropper-js"/>
var cropper;
<script th:inline="javascript">
    var prefix = ctx + "system/chopping"
    $("#form-chopping-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-chopping-add').serialize());
        }
    }

    $('#inputImage').on('change', function () {
        var filePath = $('#inputImage')[0].files[0];

        //获取并记录图片的base64编码
        var reader = new FileReader();
        reader.readAsDataURL(filePath);
        reader.onloadend = function () {
            // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
            // var dataURL = reader.result;
            // console.log(dataURL)
            // // 显示图片
            // $("#spare1").attr('value', dataURL);

            var reader = new FileReader();
            var file = $('#inputImage')[0].files[0];
            // console.log(reader.readAsDataURL(this.files[0]))

            var formdata = new FormData();
            formdata.append("avatarfile", file);
            $.ajax({
                url: ctx + "system/user/profile/updateAvatarimg",
                data: formdata,
                type: "post",
                processData: false,
                contentType: false,
                success: function (result) {
                    console.log(result)
                    $("#spare1").attr('value', result.msg);
                }
            })


        }
    })




</script>
</body>
</html>